<template>
	<view class="list-index">
		<scroll-view scroll-x class="scroll_list" :show-scrollbar="false" :enhanced="true">
			<view class="block_item">
				<view class="title" v-for="(value,key) in itemList" :key="key" @click="getItem(value,key)"
					:class="{active:indexKey===key}">{{value.name}}</view>
			</view>
		</scroll-view>
		<view class="incon">
			<image src="../../static/logo.png" mode="" @click="open"></image>
		</view>
		<view class="tanchuang"  v-show="showDialog">
			<view class="t-top">
				<view class="t-title">
					设置中心
				</view>
				<view class="t-clsoe" @click="close">
					<image src="../../static/logo.png" mode=""></image>
				</view> 
			</view>
			<view class="mid">
				<view class="class1">
					<p>账号</p>
					<input type="text" v-model="accountValue" maxlength="10"/>
				</view>
				<view class="class2">
					<p>密码</p>
					<input type="text" v-model="passwordValue"  placeholder="ddded"/>
				</view>
			</view>
			<view class="submit">
				<button type="warn" class="b_c" @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		  // type="primary"
		name: "list-items",
		data() {
			return {
				indexKey: 1,
				itemList: [],
				accountValue:'',
				passwordValue:'',
				showType:1,
				showDialog:false
			};
		},

		created() {
			this.getLabel()
		},
		methods: {
			submit(){
				uni.request({
					url:"http://localhost:8000/api/input",
					method:'POST',
					data:{
						input1:this.accountValue,
						input2:this.passwordValue
					},
					success:(res) =>{
						console.log(res)
					}
				})
			},
			open() {
				this.showDialog=true
			},
			close() {
				this.showDialog = !this.showDialog
			},
			getItem(value, key) {
				this.indexKey = key;
				this.$emit('getItems', {
					data: value,
					index: key
				})
			},
			getLabel() {
				uni.request({
					url: "/api/labels",
					success: (e) => {
						this.itemList = e.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-index {
		align-items: center;
		height: 33px;
		width: 100%;
		background-color: #cccccc;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		.tanchuang{
			width: 300px;
			height: 300px;
			background-color: #f6f6f6;
			//下面两个，可以让view在最上层显示
			position: absolute;
			z-index: 99;
			//下面三个，是让view居中
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.submit{
				
				display: flex;
				// border: 1px red solid;
				align-items: center;
				justify-content: center;
				// .b_c{
				// 	width: 100px;
				// 	background-color: #23e2dd;
				// }
			}
			.mid{
				height: 200px;
				width: 100%;
				display: flex;
				line-height: 3;
				//垂直居中，首先flex-direction是设置主轴
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.class1{
					display: flex;
					align-items: center;
				}
				.class2{
					display: flex;
					align-items: center;
				}
				
				p{
					color: red;
					margin-right: 30px;
				}
				input{
					border: 1px black solid;
				}
			}
			.t-top{
				display: flex;
				height: 30px;
				width: 100%;
				justify-content: space-between;
				background-color: #cccccc;
				.t-title{
					display: flex;
					align-items: center;
					width: 70px;
					margin-left: 10px;
				}
				.t-clsoe{
					display: flex;
					align-items: center;
					margin-right: 10px;
					image{
						width: 20px;
						height: 20px;
					}
				}
			}
		}

		.incon {
			//想要内容或者图片等等的居中，需要给他以及他的上次view加宽度
			display: flex;
			width: 10%;

			image {
				// margin-left: 0px;
				padding-left: 6px;
				border-left: #4a4a4a 2px solid;
				height: 25px;
				width: 25px;
				flex-shrink: 0;
			}
		}

		.scroll_list {
			align-items: center;
			box-sizing: border-box;
			//在横向滑动的时候，必须要加这个
			white-space: nowrap;
			width: 90%;

			.block_item {
				padding: 0 10px;
				display: flex;
				align-items: center;

				.title {
					padding: 5px 10px;

					&.active {
						color: red;
					}

				}
			}
		}

	}
</style>